<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>灯泡</title>
    <style>
        div {
            margin: auto;
        }

        .box {
            width: 200px;
            height: 200px;
            background-color: rgb(126, 218, 218);
            border-radius: 50%;
        }
        .box2 {
            width: 200px;
            height: 200px;
            background-color: rgb(13, 90, 90);
            border-radius: 50%;
        }

        .box1 {
            width: 200px;
            height: 200px;
            background-color: pink;
            border-radius: 50%;
        }

        p {
            margin: auto;
            width: 130px;
            height: 275px;
            background-color: rgb(126, 218, 218);
            border-radius: 71px;
        }

        .p1 {
            margin: auto;
            width: 130px;
            height: 275px;
            background-color: pink;
            border-radius: 71px;
        }
    </style>
</head>

<body>
    <div class="box">
        <p class="p" title="开灯"></p>
    </div>
    <img src="./Light.png">
    <script>
        let img = document.querySelector('img');
        console.log(img.src);
        document.body.style.background = 'darkgray'
        img.onclick = function () {
            console.log(img.getAttribute('src'))
            if (img.getAttribute('src') == './Light.png') {
                img.setAttribute('src', "./Light bulb.png")
            } else {
                img.setAttribute('src', "./Light.png")
            }
        }
        let div = document.querySelector('div');
        let pla = document.querySelector('p');
        div.onclick = function () {
            let color = div.getAttribute('class');
            let p = pla.getAttribute('class');
            console.log(p)
            document.body.style.backgroundImage  = 'url(../bjt1.jpg)'
            if (color == 'box' || p == 'p') {
                div.setAttribute('class', 'box1')
                pla.setAttribute('class', 'p1')
                document.body.style.backgroundImage  = 'url(../bjt1.jpg)'
            } else {
                div.setAttribute('class', 'box');
                pla.setAttribute('class', 'p');
                document.body.style.backgroundImage  = 'url(../bjt2.jpg)'
            }
        }
    </script>
</body>

</html>